<template>
    <div class="loading-box">
        <img class="icon" src="@/assets/icon/loading_icon.png">
    </div>
</template>

<script>
  export default {
    name: "SingleLine"
  }
</script>

<style scoped>
    .loading-box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.47);
        z-index: 100;
    }

    .icon{
        -webkit-animation: myRotate 1s linear infinite;
        animation: myRotate 1s linear infinite;
        height: 40px;
        width: 40px;
        position: absolute;
        top: calc((100% - 40px) / 2);
        left: 0;
        right: 0;
        margin: auto;
    }

    @-webkit-keyframes myRotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    @keyframes myRotate {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
</style>
